Здравствуйте , возникла следующая проблема:
Мне необходимо разработать jQuery-плагин, реализующий ajax-грид. Грид должен уметь сортировать (по возрастанию/убыванию) и фильтровать данные по определённым колонкам, а также осуществлять пагинацию с помощью ajax (без перезагрузки всей страницы). Данные для отображения в гриде будут браться с сервера в формате json.
Пример подключения:
<div id=”myId”></div>
$(“#myId”).ajaxgrid({
dataUrl: “%url%”, //url для запроса
sortableColumns: [“id”, “email”, “”], // массив с полями, по которым должна быть возможна сортировка
filterableColumns: [“id”, “email”], // массив с полями, по которым должна быть возможна фильтрация
rowsPerPage: 20 // количество строк на страницу для пагинации
});
Читал про фабрику виджетов jQuery UI, что-то пытался делать но все бестолку. Может кто сможет подтолкнуть в правильном направлении или какие примеры показать, буду благодарен.
Вот что у меня пока есть
(function($){
jQuery.fn.ajaxgrid = function(options){
options =$.extend({
url:"",
},options);
console.log(options);
let getTable = function(){
$.ajax({
url: options.url,
type: "POST",
data: "",
dataType: "json",
cache: false,
obj: this,
success: function (response) {
let users = [];
users.push(["№", "Email", "Name", "LastName", "Role", "Active"]);
response.forEach(function (item, i, response) {
users.push([i, response[i]['email'], response[i]['firstName'], response[i]['lastName'], response[i]['roles'], response[i]['active']]);
});
let table = document.createElement("TABLE");
table.border = "1";
table.id = "tbl";
let columnCount = users[0].length;
let row = table.insertRow(-1);
for (let i = 0; i < columnCount; i++) {
let headerCell = document.createElement("TH");
headerCell.innerHTML = users[0][i];
row.appendChild(headerCell);
}
for (let i = 1; i < users.length; i++) {
row = table.insertRow(-1);
for (let j = 0; j < columnCount; j++) {
let cell = row.insertCell(-1);
cell.innerHTML = users[i][j];
}
}
this['obj'].innerHTML = "";
this['obj'].appendChild(table);
},
error: function () {
alert('error');
}
});
};
return this.each(getTable);
};
})(jQuery);
$(document).ready(function () {
$("#entities-grid").ajaxgrid({'url':'http:/mysite.dev/ajax/users'});
});
